/* 
* 科技有限公司版权所有（）.
* Copyright (c) 2019,   and/or its affiliates. All rights reserved.
* @Date: 2020.09.01 22:47.
* @Author 
* @Description  项目 - 角色管理
**/
<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" size="mini" label-width="90px">
      <el-form-item label="角色名称：">
        <el-input v-model="listQuery.keyword" class="input-width" placeholder="角色名称" clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-button size="mini" @click="handleResetSearch">重置</el-button>
        <el-button size="mini" type="primary" @click="handleSearchList">查询</el-button>
      </el-form-item>

      <el-form-item class="fr">
        <el-button size="mini" type="primary" @click="handleAdd">新增角色</el-button>
      </el-form-item>
    </el-form>
    <!-- list -->
    <el-table :data="list" border>
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="name" label="角色名称"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>

      <!-- <el-table-column prop="adminCount" label="用户数" width="100"> </el-table-column> -->

      <el-table-column label="创建时间" width="160">
        <template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
      </el-table-column>

      <el-table-column label="是否启用" width="90">
        <template slot-scope="scope">
          <el-switch @change="handleStatusChange(scope.$index, scope.row)" :active-value="1" :inactive-value="0" v-model="scope.row.status">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)"> 编辑 </el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除 </el-button>
          <el-button size="mini" type="text" @click="handleSelectMenu(scope.$index, scope.row)">分配菜单 </el-button>
          <el-button size="mini" type="text" @click="handleSelectResource(scope.$index, scope.row)">分配资源 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next" :hide-on-single-page="true" :total="total">
    </el-pagination>
    <!-- 新增、编辑角色 弹窗 -->
    <el-dialog :title="isEdit ? '编辑角色' : '新增角色'" :visible.sync="dialogVisible" width="450px">
      <el-form :model="role" ref="roleForm" label-width="100px" size="mini">
        <el-form-item label="角色名称：">
          <el-input v-model="role.name"></el-input>
        </el-form-item>
        <el-form-item label="描述：">
          <el-input v-model="role.description" type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="是否启用：">
          <el-radio-group v-model="role.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { fetchList, createRole, updateRole, updateStatus, deleteRole } from '@/api/role';
import { formatDate } from '@/utils/date';

const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  keyword: null
};
const defaultRole = {
  id: null,
  name: null,
  description: null,
  adminCount: 0,
  status: 1
};

export default {
  name: 'roleMtg',
  // name: 'roleList',
  props: {},
  components: {},
  data() {
    return {
      list: null,
      total: null,
      isEdit: false,
      dialogVisible: false,
      role: Object.assign({}, defaultRole),
      listQuery: Object.assign({}, defaultListQuery),
    }
  },
  created() {
    this.getList();
  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === '') {
        return '';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    /**
     *@Description
     *@Return 重置 - 按钮.
     **/
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
    },
    /**
     *@Description
     *@Return 查询 - 按钮.
     **/
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    /**
     *@Description
     *@Return 新增角色 - 按钮.
     **/
    handleAdd() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.role = Object.assign({}, defaultRole);
    },
    /**
     *@Description
     *@Return 是否启用 - 按钮.
     **/
    handleStatusChange(index, row) {
      this.$confirm('是否要修改该状态?', '提示', {
        type: 'warning',
        cancelButtonText: '取消',
        confirmButtonText: '确定',
      }).then(() => {
        updateStatus(row.id, { status: row.status }).then(response => {
          console.log('修改response---', response)
          this.$message.success('修改成功!');
          this.getList();
        });
      }).catch(() => {
        this.$message.info('取消修改!');
      });
    },
    /**
    *@Description
    *@Return 角色列表.
    **/
    getList() {
      fetchList(this.listQuery).then(response => {
        this.list = response.result.data;
        this.total = response.result.total;
      });
    },
    /**
    *@Description
    *@Return 编辑.
    **/
    handleUpdate(index, row) {
      this.dialogVisible = true;
      this.isEdit = true;
      this.role = Object.assign({}, row);
    },
    /**
    *@Description
    *@Return 删除.
    **/
    handleDelete(index, row) {
      this.$confirm('是否要删除该角色?', '提示', {
        type: 'warning',
        cancelButtonText: '取消',
        confirmButtonText: '确定',
      }).then(() => {
        let ids = [];
        ids.push(row.id);
        let params = new URLSearchParams();
        params.append("ids", ids);
        deleteRole(params).then(response => {
          console.log('删除response---', response)
          this.$message.success('删除成功!');
          this.getList();
        });
      });
    },
    /**
    *@Description
    *@Return 分配菜单.
    **/
    handleSelectMenu(index, row) {
      // this.$router.push({ name: 'ActivityRenovation', params: { id: data.id } })
      this.$router.push({ name: 'AllocMenu', params: { roleId: row.id } })
    },
    /**
    *@Description
    *@Return 分配资源.
    **/
    handleSelectResource(index, row) {
      this.$router.push({ name: 'AllocResource', params: { roleId: row.id } })
      // this.$router.push({ path: '/ums/AllocResource', query: { roleId: row.id } })
    },
    /**
    *@Description
    *@Return 新增、编辑 确定弹窗.
    **/
    handleDialogConfirm() {
      this.$confirm('是否要确认?', '提示', {
        type: 'warning',
        cancelButtonText: '取消',
        confirmButtonText: '确定',
      }).then(() => {
        if (this.isEdit) {
          updateRole(this.role.id, this.role).then(response => {
            console.log('编辑---response---', response)
            this.$message.success('修改成功！');
            this.dialogVisible = false;
            this.getList();
          })
        } else {
          createRole(this.role).then(response => {
            console.log('新增---response---', response)
            this.$message.success('添加成功！');
            this.dialogVisible = false;
            this.getList();
          })
        }
      })
    },
    /**
    *@Description
    *@Return 分页 - 当前页.
    **/
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
  }
}
</script>
<style lang="scss" scoped="scoped">
</style>
